<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <view class="content">
          <view class="top">
            <view class="tabs">
              <view
                class="tabs_item"
                v-for="(item, index) in typeList"
                :key="index"
                :class="{
                  active: index === currentIndex,
                }"
                @click="handleChangeType(index)"
              >
                <text>{{ item.name }}</text>
              </view>
            </view>
            <view
              class="info"
              @click="switchPage('/pages/examBook/examBookList')"
            >
              <view class="info_text"> 我的成绩 </view>
              <view class="info_img">
                <image
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/examBook/book.png"
                  mode="scaleToFill"
                />
              </view>
            </view>
          </view>
          <view class="box">
            <view class="table">
              <view class="table_header">
                <view>开始时间</view>
                <view>预计用时</view>
                <view>类型</view>
                <view>科目</view>
              </view>
              <view class="table_list">
                <view
                  class="table_item"
                  @click="handleOpenReport(item)"
                  v-for="(item, index) in list"
                  :key="index"
                >
                  <view>{{ item.startTime }}</view>
                  <view>{{ item.examDuration }}分钟</view>
                  <view>{{ item.examType | examTypeFilter }}</view>
                  <view>英语</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getUserExamPage } from "@/api/sync";
export default {
  components: {},
  data() {
    return {
      typeList: [
        {
          name: "日",
          type: "1",
        },
        {
          name: "周",
          type: "2",
        },
        {
          name: "月",
          type: "3",
        },
      ],
      currentIndex: 0,
      list: [],
    };
  },
  filters: {
    examTypeFilter(status) {
      const statusMap = {
        1: "单词听写",
        2: "单词听选",
        3: "模考真题",
      };
      return statusMap[status];
    },
  },
  onLoad() {
    this.getData();
  },
  methods: {
    getData() {
      getUserExamPage(this.typeList[this.currentIndex].type).then((res) => {
        this.list = res.data;
      });
    },
    handleChangeType(index) {
      if (this.currentIndex === index) return;
      this.currentIndex = index;
      this.getData();
    },
    handleOpenReport(item) {
      if (item.examType === "1" || item.examType === "2") {
        this.switchPage(`/pages/examBook/examBookDetail?id=${item.id}`);
      } else if (item.examType === "3") {
        // 1: "个人赛"
        // 2: "对抗赛"
        // 3: "排位赛"
        if (item.gameType === "1") {
          this.switchPage(`/pages/task/paper/paperReport?id=${item.id}`);
        } else if (item.gameType === "2") {
          this.switchPage(`/pages/task/combat/combatReport?id=${item.id}`);
        } else if (item.gameType === "3") {
          this.switchPage(`/pages/task/rank/rankReport?id=${item.id}`);
        }
      }
    },
    switchPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./examBook";
</style>
